<script>
export default {
    props: ["country"],
    data() {
        return {
            nationals: [
                {
                    name: '中国',
                    imgurl: "/static/flag/zhongguo.png",
                    id: 0,
                },
                {
                    name: '俄罗斯',
                    imgurl: "/static/flag/eluosi.png",
                    id: 1,
                },
                {
                    name: '哈萨克斯坦',
                    imgurl: "/static/flag/hasakesitan.png",
                    id: 2,
                },
                {
                    name: '白俄罗斯',
                    imgurl: "/static/flag/baieluosi.png",
                    id: 3,
                },
                {
                    name: '吉尔吉斯斯坦',
                    imgurl: "/static/flag/jierjisisitan.png",
                    id: 4,
                },
                {
                    name: '乌兹别克斯坦',
                    imgurl: "/static/flag/wuzibiekesitan.png",
                    id: 5,
                },
                {
                    name: '土库曼斯坦',
                    imgurl: "/static/flag/tukumansitan.png",
                    id: 6,
                },
                {
                    name: '乌克兰',
                    imgurl: "/static/flag/wukelan.png",
                    id: 7,
                },
                {
                    name: '塔吉克斯坦',
                    imgurl: "/static/flag/tajikesitan.png",
                    id: 8,
                },
            ]
        }
    }
}
</script>
<template>
    <view class="flag-components">
        <template v-for="item in nationals">
            <image :src="item.imgurl" v-if="item.id == country" :key="item.id" mode="widthFix"></image>
        </template>
    </view>
</template>

<style lang="scss" scoped>
.flag-components {
    display: flex;

    image {
        width: 30rpx;
		height: 10rpx;
        border-radius: 6rpx;
    }
}
</style>